// SPDX-License-Identifier: MIT

@use "../settings/config" as cfg;
@use "../settings/icons";
@use "button";

$color-split-arrow-bg: -color-neutral-emphasis-plus !default;
$color-split-arrow-fg: -color-fg-emphasis !default;
$color-split-arrow-opacity: 0.75 !default;

$arrow-button-width: 0.5em  !default;
$separator-width:    0.75px !default;

.menu-button,
.split-menu-button {
  @include button.base();

  -fx-padding: 0;
  -fx-alignment: CENTER_LEFT;

  >.label {
    -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;
    -fx-text-fill: -color-button-fg;
  }

  >.arrow-button {
    -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y 0;

    >.arrow {
      @include icons.get("arrow-right", false);
      -fx-background-color: -color-button-fg;
      -fx-min-width: $arrow-button-width;
    }
  }

  // "vertically" means popup side (either top or bottom),
  // so, it's actually default state
  &:openvertically {
    >.arrow-button {
      >.arrow {
        @include icons.get("arrow-drop-down", false);
      }
    }
  }

  &:show-mnemonics {
    >.label {
      >.mnemonic-underline {
        -fx-stroke: -color-button-fg;
      }
    }
  }

  &.button-icon {
    -fx-padding: 0;
  }

  &:hover {
    -fx-background-color: -color-button-border-hover, -color-button-bg-hover;
    -fx-opacity: button.$opacity-hover;

    >.label {
      -fx-text-fill: -color-button-fg-hover;
    }

    >.arrow-button {
      >.arrow {
        -fx-background-color: -color-button-fg-hover;
      }
    }

    #{cfg.$font-icon-selector} {
      -fx-icon-color: -color-button-fg-hover;
      -fx-fill: -color-button-fg-hover;
    }
  }

  &:focused {
    -fx-background-color: -color-button-border-focused, -color-button-bg-focused;

    >.label {
      -fx-text-fill: -color-button-fg-focused;
    }

    >.arrow-button>.arrow {
      -fx-background-color: -color-button-fg-focused;
    }

    #{cfg.$font-icon-selector} {
      -fx-icon-color: -color-button-fg-focused;
      -fx-fill: -color-button-fg-focused;
    }
  }

  &:armed,
  &:focused:armed {
    -fx-background-color: -color-button-border-pressed, -color-button-bg-pressed;
    -fx-text-fill: -color-button-fg-pressed;

    >.label {
      -fx-text-fill: -color-button-fg-pressed;
    }

    >.arrow-button>.arrow {
      -fx-background-color: -color-button-fg-pressed;
    }

    #{cfg.$font-icon-selector} {
      -fx-icon-color: -color-button-fg-pressed;
      -fx-fill: -color-button-fg-pressed;
    }
  }

  &.button-outlined {
    -color-button-bg:       -color-bg-default;
    -color-button-fg:       button.$color-fg;
    -color-button-bg-hover: button.$color-bg-hover;
    -color-button-fg-hover: button.$color-fg-hover;
  }

  &.accent {
    @include button.accent();
  }

  &.success {
    @include button.success();
  }

  &.danger {
    @include button.danger();
  }

  &.flat {
    @include button.flat();
  }

  // prevent opacity from being applied twice
  &:disabled {
    >.label {
      -fx-opacity: 1;
    }
  }
}

.menu-button {

  // #tweak/no-arrow
  &.no-arrow {
    >.arrow-button {
      -fx-padding: 0;

      >.arrow {
        -fx-shape: none;
        -fx-scale-shape: false;
        -fx-min-width: -1;
      }
    }
  }
}

.split-menu-button {

  >.label {
    -fx-padding: cfg.$padding-y calc(cfg.$padding-x / 2) cfg.$padding-y cfg.$padding-x;
  }

  &:hover,
  &:focused:hover {
    >.arrow-button {
      -fx-background-color: $color-split-arrow-bg;
      -fx-background-insets: cfg.$border-width;
      -fx-background-radius: cfg.$inner-border-radius;
      -fx-border-color: transparent;
      -fx-opacity: $color-split-arrow-opacity;

      >.arrow {
        -fx-background-color: $color-split-arrow-fg;
        -fx-opacity: 1.0;
      }
    }
  }

  &:default:hover,
  &.accent:hover,
  &.success:hover,
  &.danger:hover {
    >.arrow-button {
      -fx-background-color: -color-fg-emphasis;

      >.arrow {
        -fx-background-color: -color-button-bg-hover;
      }
    }
  }

  &.button-outlined:hover,
  &.button-outlined:focused {
    >.arrow-button {
      -color-button-fg: -color-fg-default;
    }

    &:default,
    &.accent,
    &.success,
    &.danger {
      >.arrow-button {
        -color-button-fg: -color-fg-emphasis;
      }
    }
  }

  >.arrow-button {
    -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;
    -fx-background-radius: 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
    -fx-border-color: -color-button-fg;
    -fx-border-width: 0 0 0 $separator-width;
    -fx-border-insets: calc(cfg.$border-width + 6px) 0 calc(cfg.$border-width + 6px) 0;
  }
}
